import { memo } from "react";

const InputArea = memo(({ selected, cellValueList, setCellValueList }) => {
  const position = selected.join("*");
  return (
    <div className="typed-area">
      <input
        type="text"
        className="cell-position"
        value={selected.join("，")}
        disabled
      />
      <input
        type="text"
        className="cell-text"
        disabled={!selected.length}
        value={cellValueList[position] || ""}
        onChange={(e) =>
          setCellValueList({ ...cellValueList, [position]: e.target.value })
        }
      />
    </div>
  );
});

export default InputArea;
